import React, { FC,useState,useEffect,useImperativeHandle,forwardRef } from 'react';
import { message, Space, Tabs, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import PermissionForm from './PermissionForm'
import { getDirectoryShareList,delDirectoryUserShare } from '../../../apis/backhub/directory';

interface DataType {
  id: number;
  directoryId: number;
  directoryName: string;
  userId: number;
  userName:string;
  permission: string;
  createDateTime: string;
}

const PermissionManage = (props:{directory:number,directoryName:string}, ref) => {
	const [data,setData] = useState<DataType[]>() 
	// rowSelection object indicates the need for row selection
	const rowSelection: TableProps<DataType>['rowSelection'] = {
	  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
	    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	  },
	  getCheckboxProps: (record: DataType) => ({
	    disabled: record.directoryName === 'John Brown', // Column configuration not to be checked
	    name: record.directoryName,
	  }),
	};
	useImperativeHandle(ref,() => ({
		  func 
		})
	);
	
	const func=()=>{
		fetchData()
	}
	useEffect(() => {
	  fetchData();
	}, []);
	const locale = {
		emptyText:'暂无数据',
	}
	const fetchData = async() => {
		const response = await getDirectoryShareList({directoryId:props.directory});
		if(response.status){
			setData(response.data.page)
		}
	};
	const delShare = async(record:DataType)=>{
		const res = await delDirectoryUserShare({
			directoryId:record.directoryId,
			userIds:record.userId+'',
			permissionIds:record.permission+''
		})
		if(res.status&&res.data.success){
			message.success('删除成功');
			fetchData()
		}else{
			message.error(res.data.message)
		}
	}
	const columns: TableProps<DataType>['columns'] = [
	  {
	    title: '目录编号',
	    dataIndex: 'directoryId',
	    key: 'directoryId',
	    render: (text) => <a>{text}</a>,
	  },
	  {
	    title: '目录名称',
	    dataIndex: 'directoryName',
	    key: 'directoryName',
	  },
	  {
	    title: '用户',
	    dataIndex: 'userName',
	    key: 'userName',
	  },
	  {
	    title: '权限',
	    key: 'permission',
	    dataIndex: 'permission',
	    render: (_, { permission }) => {
			//6目录下文件新建权限 7目录下文件编辑权限 8目录下文件查看 9目录下文件下载 10目录下文件删除
			const permissionEnum = {
				6:'新建',
				7:'编辑',
				8:'查看',
				9:'下载',
				10:'删除'
			}
			return (
			  <>
				<Tag color={'volcano'} key={permission}>
				  {permissionEnum[`${permission}`]}
				</Tag>
			  </>
			)
		},
	  },
	  {
	    title: '操作',
	    key: 'action',
	    render: (_, record) => (
	      <Space size="middle">
	        <a href='javascript:void()' onClick={()=>delShare(record)} >删除</a>
	      </Space>
	    ),
	  },
	];
	const items =  [
		{
		  label: "新增权限",
		  key: "tjqx",
		  children: <PermissionForm directory={props.directory} directoryName={props.directoryName} />,
		},
		{
		  label: "维护权限",
		  key: "yyqx",
		  children: <Table<DataType> 
			rowSelection={{ type: 'checkbox', ...rowSelection }} 
			columns={columns} 
			locale={locale}
			dataSource={data} 
			/>,
		}
	];
	return (
	<div className="upload-container">
		<Tabs 
			defaultActiveKey="tjqx" 
			items={items} 
		/>
	</div>
	);
};

export default forwardRef(PermissionManage);
